<template>
<el-row type="flex" justify="center" align="middle" class="wrapper">
        <!-- type=flex 使用 flex 布局
        justify 对齐方式 
        align 相当于 align-items 但是不是 center 而是 middle
        这是饿了么决定的-->
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="手机号">
                <el-input v-model="form.username"></el-input>
            </el-form-item>   
            <el-form-item label="密码">
                <el-input type="password" v-model="form.password"></el-input>
            </el-form-item>  

            <el-form-item>
                <el-button type="primary" @click="onSubmit">登陆</el-button>
                <el-button @click="clearForm">重置</el-button>
            </el-form-item>   
        </el-form>
    </el-row>
    </template>
<script>
export default {
 data() {
        return {
            form: {
                username: "",
                password: ""
            }
        }
    },
    methods:{
        onSubmit(){
            
            this.$axios({
                url:'/login',
                method:'post',
                data:  this.form
                // {
                    // username:this.form.username,
                    // password:this.form.password
                // } 
                
            }).then(res=>{
                console.log(res);
                // 如果没有错误提示属性statusCode
                if(res.data.statusCode ==200){
                    this.$toast.success(res.data.message)
                    // 保存在本地存储
                    localStorage.setItem('token',res.data.data.token)
                                        // 转字符串
                    localStorage.setItem('user',JSON.stringify(res.data.data.user))
                    setTimeout(()=>{
                        this.$router.push({
                            
                            path:'/'
                        })
                    },1500)
                }
            })
        },
        clearForm(){
                this.form.password='';
                this.form.username='';


        }
    }
}
</script>

<style lang="less" scoped>
 .wrapper {
        position: absolute;
        width: 100%;
        top: 0;
        bottom: 0;
    }
</style>